<template>
	<view class="container">
		<view class="flex justify-between padding" style="padding-top: 80upx;">
			<!-- 更多 -->
			<text class="iconfont icon-gengduo6 margin-top-sm"></text>
			<view class="flex">
				<!-- 搜索 -->
				<text class="iconfont icon-sousuo4 margin-sm" style="font-size: 40upx;"></text>
				<!-- 感叹号 -->
				<text class="iconfont icon-gantanhao margin-sm" style="font-size: 40upx;"></text>
			</view>
		</view>
		<!-- 标题 -->
		<view class="flex">
			<view class="text-purple text-xxl margin-left" style="margin-top: -20upx;">AI对话</view>
			<view class="text-black text-xl" style="margin-top: -15upx;">·抚慰心灵</view>
		</view>
		
		<!-- 副标题 -->
		<view class="padding">
			<view class="text-purple text-lg" style="margin-top: 30upx;">模拟咨询师倾听陪伴您</view>
		</view>
		
		<!-- 内容区 -->
		<view class="all">
			<!-- 咨询分类区 -->
			<view class="">
				<scroll-view 
					scroll-x="true" 
					class="scroll-view_H"
				>
					<view 
						class="scroll-view-item_H" 
						v-for="(item,index) in categories.categories" 
						@click="handlecate(item.text, index)"
						:class="{'active' : currentCategory === index}"
					>
						<!-- 图标 -->
						<image :src="item.icon" mode="" style="height: 60upx;width: 60upx;"></image>
						<!-- 分类类别 -->
						<view class="margin-top-sm">{{item.text}}</view>
						
						
					</view>
				</scroll-view>
				<!-- 自定义滚动条 -->
				
				
				<!-- 淡色分隔线 -->
				<view class="divider"></view>
			</view>
			<!-- 卡片介绍 -->
			<view class="" v-for="(item,index) in counselors">
				<!-- 绑定点击事件 -->
				<view class="flex margin-top chat_cart" @click="handlechat(item)">
					<!-- 头像 -->
					<view class="margin-sm">
						<image :src="item.avatar" mode="" style="margin-top: 10upx;"></image>
					</view>
					
					<!-- 其他信息 -->
					<view class="">
						<view class="flex margin-top-sm">
							<view class="text-lg">{{item.name}}</view>
							<view class="cu-tag radius margin-left sm bg-gradual-purple" v-if="item.isPreferred">优选</view>
							<view class="text-gray margin-left text-sm" style="margin-top: 5upx;">服务人次：{{item.serviceCount}}</view>
							
						</view>
						<!-- 各式标签 -->
						<view 
							class="flex margin-top-sm line-purple" 
							style="font-size: 12upx;" 
						>
							<view class="cu-tag radius sm" v-for="(tag_item,index) in item.tags">{{tag_item}}</view>
						</view>
						
						<!-- 具体描述 -->
						<view class="margin-top-sm text-sm" style="line-height: 35upx; max-width: 98%;">
							{{item.description}}
						</view>
						<!-- 按钮 -->
						<view class="flex justify-end">
							<button 
								class="cu-btn margin-top-sm round bg-gradual-purple sm margin-right-lg"
								style="margin-top: 3upx; font-size: 25upx;"
							>
								{{item.buttonText}}
							</button>
						</view>
					</view>
				</view>
				<!-- 淡色分隔线 -->
				<view class="divider"></view>
			</view>
			
			
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { ref,onMounted,type Ref } from 'vue'
	import AIcategories from '@/utils/AIcategories.json'
	import AIcounselors from '@/utils/AIcounselors.json'
	import type {categories} from '@/model/AIcategories'
	import type {AIcounselors_list,counselors_infor} from '@/model/AIcounselors'
	import {get_chatAI,post_chatai, type CounselorData, getCounselorByIds} from '@/api/chatchat_AI'
	import { onLoad } from '@dcloudio/uni-app'
	
	
	// 分类列表（假设AIcategories格式正确，包含categories数组）
	const categories: Ref<categories> = ref(AIcategories)
	
	// 原始咨询师列表（存储完整数据，用于筛选）
	const originalCounselors: Ref<counselors_infor[]> = ref([])
	// 当前显示的咨询师列表（用于渲染）
	const counselors: Ref<counselors_infor[]> = ref([])
	
	// 记录当前选中的分类索引（默认选中第0项）
	const currentCategory = ref(0)
	
	onLoad(async () => {
	  try {
	    const res = await get_chatAI()
	    // 验证接口返回数据格式
	    if (res.statusCode === 200 && Array.isArray(res.data.results)) {
	      // 赋值原始数据（接口返回的results数组直接对应咨询师列表）
	      originalCounselors.value = res.data.results as counselors_infor[]
	      // 初始显示全部数据
	      counselors.value = [...originalCounselors.value]
	    } else {
	      console.error('接口返回数据格式异常', res)
	      counselors.value = []
	    }
	  } catch (error) {
	    console.error('获取咨询师列表失败', error)
	    counselors.value = []
	  }
	})
	
	// 点击分类进行筛选
	const handlecate = (category: string, index: number) => {
	  currentCategory.value = index
	  if (category === "全部") {
	    // 显示全部数据
	    counselors.value = [...originalCounselors.value]
	  } else {
	    // 筛选出categories包含当前分类的咨询师
	    counselors.value = originalCounselors.value.filter(item => 
	      item.categories && item.categories.includes(category)
	    )
	  }
	}
	import { useAccount } from '@/store/user'
	interface UserData{
		username:string,
		objectID:string
	}
	// 从状态机中获取数据
	const useStore = useAccount()
	
	
	// 点击对应的卡片进行跳转页面进行ai对话聊天
	const handlechat =async (item:counselors_infor)=>{
		// 先检查用户是否登录，没有登录让其去登录
		if(!item || !useStore.userinfo?.objectId){
			uni.showModal({
				title:'暂没登录，请登录后再进行此操作',
				confirmColor:'#F37B1D',
				content:'是否跳转到登录界面？',
				success: ({confirm}) => {
					if(confirm){
						uni.navigateTo({
							url:'/pages/TreeHole/login'
						})
					}
				}
			})
			return
		}
		// 定义数据
		const data:Ref<CounselorData> = ref({
			  "tags": item.tags!,
			  "selfId": useStore.userinfo?.objectId!,
			  "name": item.name!,
			  "otherId": item.objectId!,
			  "bio": "职场人际 | 服务人次: 100+",
			  "statusTag": {
				"text": "可服务",
				"icon": ""
			  },
			  "url": item.avatar!,
			  "description":item.description!,
			  "serviceCount":item.serviceCount!,
			  "categories":item.categories!
		})
		
		// 进行录入数据
		try {
		    // 3. 先查询是否存在匹配数据
		    const queryRes = await getCounselorByIds(data.value.selfId, data.value.otherId);
		    
		    if (queryRes.data.results.length > 0) {
		      // 4. 数据已存在：直接使用查询结果
		      console.log('数据已存在，使用已有数据', queryRes.data.results[0]);
		      const existingData = queryRes.data.results[0];
		      // 跳转到对话页面（携带已有数据的ID）
		      uni.navigateTo({
		        url: `/pages/MoodBottle/detail?objectId=${existingData.objectId}&otherid=${existingData.otherId}&selfid=${existingData.selfid}`
		      });
		    } else {
		      // 5. 数据不存在：执行上传
		      console.log('数据不存在，开始上传');
		      const uploadRes = await post_chatai(data.value);
		      console.log('上传成功', uploadRes.data);
		      // 跳转到对话页面（携带新上传数据的ID）
		      uni.navigateTo({
		        url: `/pages/MoodBottle/detail?objectId=${uploadRes.data.objectId}&otherid=${item.objectId}&selfid=${useStore.userinfo?.objectId}`
		      });
		    }
		  } catch (error) {
		    console.error('操作失败', error);
		    uni.showToast({
		      title: '操作失败，请重试',
		      icon: 'none',
		      duration: 2000
		    });
		  }
	}

	
	
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.container{
		 background-image: 
		    linear-gradient(90deg, #f5eff1 0%, #e3e1fd 100%),  /* 横向渐变 */
		    linear-gradient(to bottom, rgba(247,247,247,0) 0%, rgba(247,247,247,0.85) 100%);  /* 垂直渐变（透明度变化） */
		  
		  /* 混合模式：让两个渐变融合显示 */
		  background-blend-mode: overlay;
		  
		  height: 250upx; /* 顶部渐变区域高度 */
		  width: 100%;
	}
	.all{
		background-color: white;
		min-height: 1000upx;
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 20%;
		height: 100upx;
		text-align: center;
		font-size: 25upx;
		padding: 20upx;
	}
	.scroll-view-item_H.active{
		color: #9c27b0; /* 紫色文字 */
			font-weight: bold; /* 加粗 */
			// 可以添加更多样式，比如下划线或背景色
			&::after {
				content: '';
				display: block;
				width: 40upx;
				height: 6upx;
				background-color: #9c27b0;
				border-radius: 3upx;
				margin: 8upx auto 0;
			}
	}
	.chat_cart{
		image{
			height: 80upx;
			width: 80upx;
		}
		
	}
	/* 淡色分隔线样式 */
	.divider {
		
		width: 90%; /* 线长略短于卡片宽度，更美观 */
		margin: 10upx auto; /* 上下留白，居中显示 */
		margin-top: 40upx;
		border-top: 1px solid #eee; /* 浅灰色线条 */
	}
</style>
